<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>个人中心 - ${systemName}</title>
    <link href="${pageContext.request.contextPath}/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="${pageContext.request.contextPath}/static/bootstrap/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/client.css">
    <style>
        .profile-card {
            border: none;
            border-radius: 10px;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
        }

        .profile-header {
            background-color: #f1f8ff;
            border-radius: 10px 10px 0 0;
            padding: 20px;
            text-align: center;
        }

        .profile-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .profile-body {
            padding: 2rem;
            background: white;
        }

        .form-edit {
            display: none;
        }

        .btn-edit {
            position: absolute;
            right: 20px;
            top: 20px;
        }

        .info-item {
            display: flex;
            margin-bottom: 1rem;
            padding: 0.8rem 0;
            border-bottom: 1px solid #f8f9fc;
        }

        .info-label {
            font-weight: 600;
            color: #6c757d;
            min-width: 100px;
        }

        .info-value {
            color: #495057;
            flex: 1;
        }

    </style>
</head>
<body>
<jsp:include page="/WEB-INF/views/client/common/nav.jsp"/>
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card profile-card mb-5">
                <div class="profile-header position-relative">
                    <!-- 头像 -->
                    <img src="https://ui-avatars.com/api/?name=${loginUser.username}&background=6366f1&color=fff"
                         class="profile-avatar mb-3"
                         alt="用户头像">
                    <h3>${loginUser.username}</h3>
                    <p class="text-muted">${loginUser.role == 0 ? '普通用户' : '管理员'}</p>

                    <!-- 编辑按钮 -->
                    <button id="editBtn" class="btn btn-outline-primary btn-edit">
                        <i class="bi bi-pencil"></i> 编辑资料
                    </button>
                </div>

                <!-- 修改后的profile-body内容 -->
                <div class="profile-body">
                    <!-- 查看模式 -->
                    <div id="viewMode">
                        <div class="info-item">
                            <span class="info-label">用户名</span>
                            <span class="info-value">${loginUser.username}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">姓名</span>
                            <span class="info-value">${loginUser.name}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">手机号</span>
                            <span class="info-value">${loginUser.phone}</span>
                        </div>
                        <div class="info-item">
                            <span class="info-label">地址</span>
                            <span class="info-value">${loginUser.address}</span>
                        </div>

                        <div class="info-item">
                            <span class="info-label">角色</span>
                            <span class="info-value">
                                    <span>${loginUser.role == 0 ? '普通用户' : '管理员'}</span>
                                </span>
                        </div>
                    </div>

                    <!-- 编辑模式 -->
                    <form id="editMode" class="form-edit"
                          action="${pageContext.request.contextPath}/client/user?method=update" method="post">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="username" class="form-label">用户名</label>
                                <input disabled type="text" class="form-control" id="username" name="username"
                                       value="${loginUser.username}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">姓名</label>
                                <input type="text" class="form-control" id="name" name="name" value="${loginUser.name}">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="phone" class="form-label">手机号</label>
                                <input type="tel" class="form-control" id="phone" name="phone"
                                       value="${loginUser.phone}">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="address" class="form-label">地址</label>
                                <input type="text" class="form-control" id="address" name="address"
                                       value="${loginUser.address}">
                            </div>
                        </div>

                        <div class="d-flex justify-content-end gap-2 pt-3 border-top">
                            <button type="button" id="cancelBtn" class="btn btn-outline-secondary">
                                <i class="bi bi-x-circle me-1"></i> 取消
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-1"></i> 保存更改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/WEB-INF/views/client/common/footer.jsp"/>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const editBtn = document.getElementById('editBtn');
    const cancelBtn = document.getElementById('cancelBtn');
    const viewMode = document.getElementById('viewMode');
    const editMode = document.getElementById('editMode');

    // 编辑按钮点击事件
    editBtn.addEventListener('click', function () {
      viewMode.style.display = 'none';
      editMode.style.display = 'block';
      this.style.display = 'none';
    });

    // 取消按钮点击事件
    cancelBtn.addEventListener('click', function () {
      viewMode.style.display = 'block';
      editMode.style.display = 'none';
      editBtn.style.display = 'block';
    });

    // 表单提交事件
    editMode.addEventListener('submit', function (e) {
      // 可以在这里添加表单验证
      const name = document.getElementById('name').value.trim();
      const phone = document.getElementById('phone').value.trim();

      if (name === '') {
        e.preventDefault();
        alert('请输入姓名');
        return;
      }

      // 简单的手机号验证
      if (phone && !/^1[3-9]\d{9}$/.test(phone)) {
        e.preventDefault();
        alert('请输入有效的手机号码');
        return;
      }
    });
  });
</script>
</body>
</html>
